<template>
  <div id="index">
    <h1 class="title">
      大学生就业压力问题调查研究
    </h1>
    <section class="m-t15">
      <van-radio-group class="my-group" v-model="answer[0]">
        <p class="q-title">1.您的性别：</p>
        <van-radio icon-size="16" name="1" class="f14 m-t5">男</van-radio>
        <van-radio icon-size="16" name="2" class="f14 m-t5">女</van-radio>
      </van-radio-group>
      <van-radio-group class="my-group" v-model="answer[1]">
        <p class="q-title">2.您对自己的职业生涯规划程度：</p>
        <van-radio icon-size="16" name="1" class="f14 m-t5">感到茫然，不知道自己能做什么</van-radio>
        <van-radio icon-size="16" name="2" class="f14 m-t5">只有非常模糊的想法和愿望</van-radio>
        <van-radio icon-size="16" name="3" class="f14 m-t5">有3—5年的职业生涯规划</van-radio>
        <van-radio icon-size="16" name="4" class="f14 m-t5">有5年以上长期且明确的职业规划</van-radio>
      </van-radio-group>
      <van-radio-group class="my-group" v-model="answer[2]">
        <p class="q-title">3.您对首份工作期待的工资收入量为：</p>
        <van-radio icon-size="16" name="1" class="f14 m-t5">2000-4999</van-radio>
        <van-radio icon-size="16" name="2" class="f14 m-t5">5000-7999</van-radio>
        <van-radio icon-size="16" name="3" class="f14 m-t5">8000-10000</van-radio>
      </van-radio-group>
      <van-radio-group class="my-group" v-model="answer[3]">
        <p class="q-title">4.您期待的择业方向是：</p>
        <van-radio icon-size="16" name="1" class="f14 m-t5">民营企业</van-radio>
        <van-radio icon-size="16" name="2" class="f14 m-t5">外资企业</van-radio>
        <van-radio icon-size="16" name="3" class="f14 m-t5">国有单位或事业单位</van-radio>
        <van-radio icon-size="16" name="4" class="f14 m-t5">政府机关</van-radio>
        <van-radio icon-size="16" name="5" class="f14 m-t5">其他</van-radio>
      </van-radio-group>
      <van-radio-group class="my-group" v-model="answer[4]">
        <p class="q-title">5.您认为什么时候开始求职找工作最合适：</p>
        <van-radio icon-size="16" name="1" class="f14 m-t5">毕业前一年</van-radio>
        <van-radio icon-size="16" name="2" class="f14 m-t5">毕业前六个月</van-radio>
        <van-radio icon-size="16" name="3" class="f14 m-t5">毕业前三个月</van-radio>
        <van-radio icon-size="16" name="4" class="f14 m-t5">毕业后</van-radio>
      </van-radio-group>
    </section>
    <div class="btm">
      <button @click="reset">重新填写</button>
      <button class="submit" @click="submit">提交表格</button>
    </div>
  </div>
</template>

<script>
import { myForm,  postTable } from '@/services/index'
export default {
  data(){
    return {
      answer: []
    };
  },
  created() {
    myForm().then(res=>{
      console.log(res);
    }).catch(e=>{
      console.log(e);
    })
  },
  methods: {
    reset(){
      this.answer = []
    },
    async submit(){
      console.log(this.answer);
      try {
        let res = await postTable({ data: this.answer })
        console.log(res)
        if(res&&res.data&&res.data.code === 200){
          this.answer = []
          this.$toast.success('提交成功！')
        }
      } catch(e){
        console.log(e);
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  #index{
    padding: 2.667vw;
    .my-group{
      margin-bottom: 4vw;
    } 
    h1{
      font-size: 5.333vw;
      color: #1ea0fa;
      text-align: center;
      border-bottom: 1px dotted #aaa;
      padding-bottom: 10px;
    }
    .q-title{
      font-size: 4.267vw;
      padding-bottom: 1.333vw;
    }
    .btm{
      width: 80%;
      margin: 13.333vw auto;
      /* padding: 10vw; */
      display: flex;
      justify-content: center;
      button{
        font-size: 3.733vw;
        margin-right: 4.8vw;
        padding: 0 5.333vw;
        height: 10.667vw;
        line-height: 10.667vw;
        text-align: center;
        border: 1px solid #ddd;
        color: #888;
        border-radius: 5px;
        transition: .2s;
        &:active{
          background: #eee;
        }
        &.submit{
          background-color: #1ea0fa;
          border-color: #1ea0fa;
          color: #fff;
          &:active{
            background-color:#1e64fa;
          }
        }
      }
    }
  }
</style>